<template>
  <div id="login">
    <div class="wrap">
      <img src="../../assets/login/backg.jpg">
    </div>
    <div class="login-content">
      <img src="../../assets/index/logo3.png" class="logo">
      <div class="login-user">
        <i class="iconfont icon-user" aria-hidden="true" style="color: white;"/>
        <input v-model="username" type="text" class="user-input" >
      </div>
      <div class="login-pass">
        <i class="iconfont icon-mima" aria-hidden="true" style="color: white;"/>
        <input v-model="password" type="password" class="user-input" @keyup.enter="postlogin" >
      </div>
      <button type="submit" class="login-button" @click="postlogin">
        <span>登陆/LOGIN</span>
      </button>
      <!--注释 测试传输及提交-->
      <!--<div>{{ this.$store.state.loginin }}</div>-->
    </div>

  </div>
</template>

<script>
import msgbox from '@/common/msgbox.js'
import hash from '@/common/hash.js'
import store from '@/store'

export default {
  name: 'Login',
  store: store,
  data() {
    return {
      username: '',
      password: '',
      msg: {
        'Success': '登陆成功',
        'LockError': '账号被锁定',
        'OfContrastError': '用户名或密码错误',
        'NonExistent': '请求的数据没有找到',
        'RequestError': '请求类型错误'
      }
    }
  },
  methods: {
    postlogin() {
      const vdata = [
        {//  验证username
          val: this.username,
          rules: {//  规则
            required: {
              msg: msgbox.get('请输入账号')
            },
            minLength: {
              msg: msgbox.get('Username_error'),
              args: [3]
            }
          }
        }
      ]
      const res = this.$g.verify.check(vdata)
      if (res !== true) {
        this.$message.error(res)
        return false
      }
      const pdata = [
        {//  验证password
          val: this.password,
          rules: {//  规则
            required: {
              msg: msgbox.get('Password')
            },
            rangeLength: {
              msg: msgbox.get('PasswordError'),
              args: [6, 15]
            }
          }
        }
      ]
      const ress = this.$g.verify.check(pdata)
      if (ress !== true) {
        this.$message.error(ress)
        return false
      }
      const p = /^[^\u4E00-\u9FA5\uF900-\uFA2D\u0020]{6,15}$/
      if (p.test(this.password)) {
        const that = this
        this.$g.ajax({
          method: 'post',
          path: 'admins/login',
          data: {
            username: this.username,
            password: hash.md5hex(this.password)
          },
          cbSuccess: function(data) {
            that.$message.success('登录成功')
            that.$store.dispatch('loginIn', data.memo)
            that.$router.push({
              path: '/index'
            })
            console.log(data)
          },
          cbError: function(data) {
            const msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      } else {
        this.$message.error('不能输入空格')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
#login {
  text-align: center;
}

.logo{
  max-width: 220px;
}
.wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.wrap img {
  width: 100%;
  height: 100%;
}

.login-content {
  position: absolute;
  width: 335px;
  margin: 14% 0 0 40%;
}

.login-user {
  /*border: 1px solid red;*/
  width: 333px;
  height: 40px;
  margin-top: 30px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.login-pass {
  /*border: 1px solid red;*/
  width: 333px;
  height: 40px;
  margin-top: 18px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.user-input {
  width: 295px;
  height: 38px;
  margin-left: 8px;
  background: rgba(0, 0, 0, 0);
  border: 0;
  font-size: 18px;
  color: #ffffff;
}

.login-button {
  width: 333px;
  height: 40px;
  background-color: #4fa9b5;
  margin-top: 18px;
  border: 0;
  font-size: 18px;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
</style>
